// https://github.com/cibernox/ember-power-select/blob/master/ember-power-select/scss/variables.scss

$ember-power-select-background-color: var(
  --token-form-control-base-surface-color-default
);
$ember-power-select-disabled-background-color: var(
  --token-form-control-disabled-surface-color
);
$ember-power-select-multiple-selection-background-color: var(
  --token-color-palette-neutral-100
);
$ember-power-select-highlighted-color: inherit;
$ember-power-select-highlighted-background: var(
  --token-color-surface-interactive-hover
);
$ember-power-select-border-color: var(
  --token-form-control-base-border-color-default
);
$ember-power-select-default-border: var(--token-form-control-border-width) solid
  $ember-power-select-border-color;
$ember-power-select-default-border-radius: var(
  --token-form-control-border-radius
);

$ember-power-select-opened-border-radius: var(
  --token-form-control-border-radius
);

$ember-power-select-focus-box-shadow: var(--token-elevation-low-box-shadow);
$ember-power-select-dropdown-box-shadow: var(--token-elevation-low-box-shadow);
$ember-power-select-option-padding: 8px;
$ember-power-select-focus-outline: 3px solid
  var(--token-color-focus-action-external);
$ember-power-select-trigger-ltr-padding: 7px 5px;
$ember-power-select-trigger-rtl-padding: 7px 5px;
$ember-power-select-multiple-option-padding: 0;
$ember-power-select-multiple-option-line-height: 1.3;

.ember-basic-dropdown-content {
  @apply min-h-[34px];

  .hds-dropdown-list-item--variant-interactive {
    @apply flex items-center px-2;
  }
}

@import "ember-power-select";

.ember-basic-dropdown-content {
  border: none !important;
  @apply hds-surface-high mt-px;
}

.ember-power-select-options[role="listbox"] {
  @apply max-h-[200px];
}

.ember-power-select-option {
  @apply py-px;

  &:first-child {
    @apply mt-[3px];
  }

  &:last-child {
    @apply mb-[3px];
  }
}

.ember-power-select-option--loading-message,
.ember-power-select-option--no-matches-message {
  @apply h-7 px-3.5 text-color-foreground-faint;
}
